<template>
  <div class="app-container">
    <div class="change">
			<!-- <p>
			  <span>履职状态</span>
			  <el-select v-model="status" placeholder="请选择履职状态" class="userselect" @change="changestatus" :disabled="writeOradd === 1">
          <el-option v-for="item in lvzhilist" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
			</p> -->
			<p>
			  <span>问题分类</span>
			  <el-select v-model="wenti" placeholder="请选择问题分类" class="userselect">
          <el-option v-for="item in proclassify" :key="item.lid" :label="item.lname" :value="item.lname"></el-option>
        </el-select>
			</p>
			<!-- <p v-if="classifyshow && idflag === 0">
			  <span>问题所属</span>
				<el-cascader v-model="suoshu" class="userselect" :options="threeData" :props="{ checkStrictly: true,children:'childsList',label:'name',value:'name' }" clearable @change="changeSuoshu"></el-cascader>
			</p> -->
			<p>
			  <span>问题所属</span>
				<el-select v-model="suoshu" placeholder="请选择问题分类" class="userselect" @change="changeSuoshu">
          <el-option v-for="item in threeData1" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
			</p>
			
      <p>
        <span>问题内容</span>
        <el-input v-model="content" :disabled="islook" type="text" class="userselect" placeholder="请输入履职内容"/>
      </p>
      <p>
        <span>提交人员</span>
        <el-input v-model="peopele" :disabled="islook" type="text" class="userselect" placeholder="请输入提交人员" />
      </p>
			<p>
			  <span>提交时间</span>
			  <el-input v-model="times" :disabled="islook" type="text" class="userselect" placeholder="请输入提交时间" />
			</p>
      <p>
        <span>问题图片</span>
        <el-upload
          class="avatar-uploader"
          action
          :http-request="designUpAvatar"
          :show-file-list="false"
					:disabled="islook"
        >
          <img v-if="imageurl" :src="imageurl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
    </div>
		<div class="submits">
		  <div class="save" @click="save" v-if="!islook">保存</div>
		  <div class="nosave" @click="nosave" v-if="!islook">取消</div>
			<div class="save" @click="back" v-if="islook">返回</div>
		</div>
  </div>
</template>

<script>
	let fatherId = null,temp = null,chejianId = null;
	import { addProblemResult,updateProblemResult,getProblemClassify,getAnquanMulu,getAllchejian } from '@/api/oneclassify'
	import { uploadFile } from '@/api/people'
	export default {
		data(){
			return{
				tempData: {},
				writeOradd: 0,   //1修改还是0增加
				islook: false,
				status: '',
        content: '',
        peopele: '',
        times: '',
				imageurl: '',
				lvzhilist: [{
					name: '正常履职',
					value: '0'
				},{
					name: '发现提交问题',
					value: '4'
				}],
				wenti: '',   //问题
				suoshu: '',  //所属
				proclassify:[],  //问题分类
				threeData: [],   //所属分类
				classifyshow: false,
				idflag: 0  //0车间班组，1公司总监
			}
		},
		mounted() {
			// console.log(this.$route.params)
			// this.getanquan()
			this.getproblem()
			this.getanquanchejian()
			if(this.$route.params.look){
				this.islook = true
			}
			fatherId = this.$route.params.fatherId
			if(this.$route.params.options){
				temp = JSON.parse(this.$route.params.options)
				console.log(temp)
        this.status = temp.status
				this.writeOradd = 1
				if(temp.status === '4'){
					console.log('满足2，4')
					this.classifyshow = true
          this.content = temp.contents
          this.peopele = temp.rpersons
          this.times = temp.normalTime
					this.imageurl = temp.imgurls
					this.wenti = temp.leibie
					this.suoshu = temp.chejianName
        }else{
					this.classifyshow = false
          this.content = temp.resultContent
          this.peopele = temp.resultPerson
          this.times = temp.resultTimes
          this.imageurl = temp.resultUrl
        }
			}else{
				this.writeOradd = 0
			}
			console.log(this.tempData)
		},
		methods:{
			/**
			 * 保存
			 */
			save(){
				let obj = {}
				let crtime = new Date()
				const crtimes = `${crtime.getFullYear()}-${crtime.getMonth()+1}-${crtime.getDate()}`
				// console.log(times)
        obj = {
          contents: this.content,
          rpersons: this.peopele,
          normalTime: this.times,
          imgurls: this.imageurl,
          status: 4,
          leibie: this.wenti,
          tijiaoMulv: fatherId,  //提交问题得问题项id
          chejianName: this.suoshu,
          parentId: chejianId,   //提交给指定车间id
          tijiaoTime: crtimes
        }
				if(this.writeOradd == 0){
					addProblemResult(obj).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.$router.go(-1)
					})
				}else{
					delete this.tempData.insertTime
					delete this.tempData.updateTime
					obj.rid = temp.rid
					updateProblemResult(obj).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.$router.go(-1)
					})
				}
			},
			/**
			 * 获取班组分类列表
			 */
			// getanquan(){
			// 	getAnquanMulu({}).then(res => {
			// 		console.log('banzu',res)
			// 		let templist = res.data.map(item => {
			// 			let temp = item
			// 			if(temp.childsList){
			// 				temp.childsList.forEach(key => {
			// 					// console.log('key',key)
			// 					delete key.childsList
			// 				})
			// 			}
			// 			return temp
			// 		})
			// 		this.threeData = templist
			// 		console.log('this.threeData',this.threeData)
			// 	})
			// },
			/**
			 * 获取所有车间
			 */
			getanquanchejian(){
				getAllchejian({}).then(res => {
					console.log(res)
					this.threeData1 = res.data
				})
			},
			// 获取问题分类
			getproblem(){
				getProblemClassify({}).then(res => {
					console.log('wenti',res)
					this.proclassify = res.data
				})
			},
			// 选择问题所属
			changeSuoshu(e){
        console.log('选择问题所属',e)
        this.nameSearchId(e,this.threeData1)
        console.log('chejianId',chejianId)
				// if(this.idflag === 0){
				// 	this.suoshu = e[e.length-1]
				// 	this.nameSearchId(this.suoshu,this.threeData)
				// }else{
				// 	this.suoshu = e
				// 	this.nameSearchId(this.suoshu,this.threeData1)
				// }
			},
			/**
			 * 递归根据名字查找对应对象id
			 */
			nameSearchId(name,arr){
				for(let i = 0;i<arr.length;i++){
					if(name === arr[i].name){
						chejianId = arr[i].id
						return
					}else{
						if(arr[i].childsList){
							this.nameSearchId(name,arr[i].childsList)
						}
					}
				}
			},
			nosave(){
				this.$router.go(-1)
			},
			back(){
				this.$router.go(-1)
			},
			changestatus(e){
				console.log(e)
				if(e === '4'){
					this.classifyshow = true
				}else{
					this.classifyshow = false
				}
			},
			// 上传头像
			designUpAvatar(item){
				console.log(this.fileNum)
				var formData = new FormData()
				formData.append("file", item.file)
				uploadFile(formData).then(res => {
				  console.log(res)
					this.$message({
					  showClose: true,
					  message: '添加成功',
					  type: "success"
					})
					// this.imageUrl = res
					this.imageurl = res
					console.log(this.imageurl)
					this.$forceUpdate()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.avatar-uploader{
  position: relative;
}
.avatar-uploader .el-upload {
  border: 1px dashed #999 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatars{
	width: 45px;
	height: 45px;
  margin: 0 auto;
  border: 1px solid #ccc
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
	border: 1px dashed #CCCCCC;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
	.disable{
		pointer-events: none;
		background: #808080 !important;
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
			> textarea{
				width: inherit;
				flex: 1;
				height: 60px;
				border-radius: 3px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				padding: 10px;
			}
	  }
	}
	.avatar-uploader .el-upload {
	  border: 1px dashed #999 !important;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  line-height: 100px;
	  text-align: center;
	}
	.avatar {
	  width: 100px;
	  height: 100px;
	  display: block;
	}
	.submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
</style>